<strong></strong><!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>199-面向对象-轮播图.html</title>
		<style>
			/*
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		img{
			width: 100%;
			height: 100%;
		}
		.leftbtn .rightbtn{
			position: absolute;
			top: 50%;
			margin-top: -30px;
			width: 50px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			font-size: 30px;
			color: #fff;
			background-color: rgba(0,0,0,0.3);
			cursor: pointer;
		}
		.leftbtn{
			left: 0;
		}
		.rightbtn{
			right: 0;
		}
		.bottombtn{
			position: absolute;
			bottom: 10px;
			left: 50%;
		}
		.bottombtn li{
			float: left;
			width: 30px;
			height: 30px;
			margin-right: 15px;
			background: rgba(0,0,0,0.5);
			border-radius: 50%;
			cursor: pointer;
		}
		.bottombtn li .active{
			background: rgba(255,0,0,0.7);
		}
		*/
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.leftArrow,
			.rightArrow {
				position: absolute;
				top: 50%;
				width: 30px;
				height: 60px;
				line-height: 60px;
				margin-top: -30px;
				background-color: rgba(0, 0, 0, 0.6);
				text-align: center;
				color: #fff;
				font-size: 24px;
				cursor: pointer;
			}

			.leftArrow {
				left: 0;
			}

			.rightArrow {
				right: 0;
			}

			.bottomBtn {
				position: absolute;
				left: 50%;
				bottom: 10px;
			}

			.bottomBtn li {
				float: left;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.6);
				margin-right: 5px;
				cursor: pointer;
			}

			.bottomBtn li.active {
				background-color: rgba(0, 0, 0.));
			}
		</style>
	</head>
	<body>
		<div id="box1">
		</div>
		<div id="box2"></div>
	</body>
	<script src="js/util.js"></script>
	<script>
		function Carousel(options) {
			//1.罗列属性
			this.oBox = document.getElementById(options.id);
			this.aImg = options.aImg;
			this.width = options.width;
			this.height = options.height;
			this.oUlImg = null;
			this.oUlBtn = null;
			this.oLeftArrow = null;
			this.oRightArrow = null;
			this.playDuration = options.playDuration;
			this.now = 0; //当前显示的图片下标
			//2.初始化DOM节点
			this.init();
			//3.绑定事件
			this.bindEvent();
			//自动播放
			if (this.playDuration) {
				this.auto();
			}
		}
		Carousel.prototype.init = function() {
			//处理外层父容器
			this.oBox.style.position = 'relative';
			this.oBox.style.width = this.width + 'px';
			this.oBox.style.height = this.height + 'px';
			//1.生成图片的容器
			this.oUlImg = document.createElement('ul');
			//2.底部指示按钮
			this.oUlBtn = document.createElement('ul');
			this.oUlBtn.className = 'bottomBtn';
			this.oUlBtn.style.zIndex = 99;
			for (var i = 0; i < this.aImg.length; i++) {
				//图片容器
				var oLi = document.createElement('li');
				oLi.style.position = 'absolute';
				oLi.style.left = 0;
				oLi.style.top = 0;
				//底部指示按钮
				var oBtn = document.createElement('li');

				if (i == 0) {
					oLi.style.zIndex = 50;
					oLi.style.opacity = 1;
					oBtn.className = 'active';
				} else {
					oLi.style.zIndex = 0;
					oLi.style.opacity = 0.5;
				}
				var oImg = document.createElement('img');
				oImg.src = this.aImg[i];
				oLi.appendChild(oImg);

				this.oUlImg.appendChild(oLi);
				this.oUlBtn.appendChild(oBtn);
			}

			//生成左右按钮
			this.oLeftArrow = document.createElement('span');
			this.oRightArrow = document.createElement('span');

			this.oLeftArrow.className = 'leftArrow';
			this.oRightArrow.className = 'rightArrow';
			this.oLeftArrow.style.zIndex = 99;
			this.oRightArrow.style.zIndex = 99;
			this.oLeftArrow.innerHTML = '&lt;';
			this.oRightArrow.innerHTML = '&gt;';
			//添加图片的容器到外层父容器中
			this.oBox.appendChild(this.oUlImg);
			//添加左右按钮到外层父容器中
			this.oBox.appendChild(this.oLeftArrow);
			this.oBox.appendChild(this.oRightArrow);
			//添加底部指示按钮到外层父容器中
			this.oBox.appendChild(this.oUlBtn);
			this.oUlBtn.style.marginLeft = -this.oUlBtn.offsetWidth * 0.5 + 'px';

		}
		Carousel.prototype.bindEvent = function() {
			var _this = this;
			//绑定右按钮
			this.oRightArrow.onclick = function() {


				//显示下一张
				_this.now++;
				if (_this.now >= _this.aImg.length) {
					_this.now = 0;
				}
				_this.tab();
			}
			//绑定左按钮
			this.oLeftArrow.onclick = function() {
				_this.now--;
				if (_this.now < 0) {
					_this.now = _this.aImg.length - 1;
				}
				_this.tab();
			}
			//绑定底部指示按钮
			for (var i = 0; i < this.oUlBtn.children.length; i++) {
				this.oUlBtn.children[i].index = i;
				this.oUlBtn.children[i].onclick = function() {
					_this.now = this.index;
					_this.tab();
				}
			}
		}
		Carousel.prototype.tab = function() {
			//1.清除所有
			for (var i = 0; i < this.aImg.length; i++) {
				this.oUlImg.children[i].style.zIndex = 0;
				this.oUlImg.children[i].style.options = 0.5;
				this.oUlBtn.children[i].className = '';
			}
			//显示新的
			this.oUlImg.children[this.now].style.zIndex = 50;
			// this.oUlImg.children[this.now].style.options = 1;
			animation(this.oUlImg.children[this.now], {
				opacity: 100
			});
			this.oUlBtn.children[this.now].className = 'active';
		}
		Carousel.prototype.auto = function() {
			var time = 0;
			var _this = this;
			timer = setInterval(this.oRightArrow.onclick, this.playDuration);
			this.oBox.onmouseover = function() {
				clearInterval(timer);
			}
			this.oBox.onmouseout = function() {
				timer = setInterval(_this.oRightArrow.onclick, _this.playDuration);
			}
		}
		new Carousel({
			id: 'box1',
			aImg: ['./images/q1.jpeg', './images/q2.jpeg', './images/timg1.jpeg'],
			width: 1024,
			height: 683,
			playDuration: 1000
		});
		new Carousel({
			id: 'box2',
			aImg: ['./images/q1.jpeg', './images/q2.jpeg', './images/timg1.jpeg'],
			width: 1024,
			height: 683,
			playDuration: 1000
		});




		/*
		function Coursel(options){
			//1.罗列属性
			this.box = document.getElementById(options.id);
			this.width = options.width;
			this.height = options.height;
			this.img = options.img;
			this.oUlImg = null;
			this.oLeftBtn = null;
			this.oRightBtn = null;
			this.oUlBtns = null;
			//设置轮播图时间
			this.playtime = options.playtime;
			//默认显示第一张图片
			this.now = 0;
			//2.初始化页面
			this.init();
			//3.绑定事件
			this.bindEvent();


			//4.是否自动轮播
			if(this.playtime){
				this.auto();
			}
		}
		Coursel.prototype.init = function(){
			//给外层父容器添加样式
			this.box.style.position = "relative";
			this.box.style.width = this.width+"px";
			this.box.style.height = this.height+"px";
			//1.生成图片父容器
			this.oUlImg =document.createElement('ul');
			//限制图片父容器宽高
			this.oUlImg.style.width = "100%";
			this.oUlImg.style.height = "100%";
			//生成每一个li
			for(var i = 0;i<this.img.length;i++){
				//生成li
				var oLi = document.createElement('li');
				//设置li的样式
				oLi.style.width = "100%";
				oLi.style.height = "100%";
				oLi.style.position = "absolute";
				oLi.style.top = 0;
				oLi.style.left = 0;
				//默认显示第一张图片
				if(i == 0){
					oLi.style.zIndex = 99;
				}
				//生成图片
				var oImg = document.createElement('img');
				oImg.src = this.img[i];
				//将图片插入到li中
				oLi.appendChild(oImg);
				//将li插入到图片父容器中
				this.oUlImg.appendChild(oLi);
			}
			//2.生成左右按钮
			this.oLeftBtn = document.createElement("span");
			this.oRightBtn = document.createElement("span");
			//给按钮添加样式
			this.oLeftBtn.className = 'leftbtn';
			this.oRightBtn.className = 'rightbtn';
			//改变按钮显示等级
			this.oLeftBtn.style.zIndex = "999";
			this.oRightBtn.style.zIndex = "999";
			//左右按钮添加内容
			this.oLeftBtn.innerHTML = "&lt;";
			this.oRightBtn.innerHTML = "&gt;";
			//3.生成底部按钮
			this.oUlBtns = document.createElement('ul');
			//改变底部按钮显示等级
			oUlBtns.style.zIndex = 999;
			//给底部按钮添加样式
			oUlBtns.className = "bottombtn";
			for(var j = 0;j<this.img.length;j++){
				var oLi = document.createElement('li');
				//默认第一个被选中
				if(j == 0){
					oLi.className = "active";
				}
				oUlBtns.appendChild(oLi);
			}
			//将图片父容器插入到外层父容器中
			this.box.appendChild(this.oUlImg);
			//将左右按钮插入到外层父容器中
			this.box.appendChild(this.oLeftBtn);
			this.box.appendChild(this.oRightBtn);
			//将按钮父容器插入到外层父容器中
			this.box.appendChild(oUlBtns);
			//通过js控制底部按钮的位置
			oUlBtns.style.marginLeft = -oUlBtns.offsetWidth*0.5 + "px";
		}
		Coursel.prototype.bindEvent = function(){
			//1.给右箭头绑定点击事件
			var _this =this;
			this.oRightBtn.onclick = function(){
				_this.now++;
				if(_this.now > _this.img.length -1){
					_this.now = 0;
				}
				_this.tab();
			}
			//2.给左箭头绑定点击事件
			this.oLeftBtn.onclick = function(){
				_this.now--;
				if(_this.now <0){
					_this.now = _this.img.length -1;
				}
				_this.tab();
			}
			//3.给底部按钮添加事件
			for(var j =0;j<this.oUlBtns.children.length;j++){
				this.oUlaBtns.children[j].index = j;
				this.oUlaBtns.children[j].onclick = function(){
					_this.now = this.index;
					_this.tab();
				}
			}
		}
		Coursel.prototype.tab = function(){
			for(var i = 0;i<this.oUlImg.children.length;i++){
				this.oUlImg.children[i].style.zIndex = 0;
				this.oUlImg.children[i].style.opacity = 0.2;
				this.oUlBtns.children[i].className = "";
			}
			this.oUlImg.children[this.now].style.zIndex = "99";
			// this.oUlImg.children[this.now].style.opacity = 1;
			//执行动画
			animate(this.oUlImg.children[this.now],{opacity:100});
			this.oUlBtns.children[this.now].className = "active";
		}
		Coursel.prototype.auto = function(){
			var _this = this;
			//设置定时器
			var timer = 0;
			//自动轮播
			timer = setInterval(this.oRightBtn.onclick,this.playtime);
			//鼠标移入停止动画
			this.box.onmouseover = function(){
				clearInterval(timer);
			}
			//鼠标移出重新开始动画
			this.box.onmouseout = function(){
				timer = setInterval(_this.oRightBtn.onclick,_this.playtime);
			}
		}
		new Coursel({
			id:"box",
			width:1000,
			height:400,
			img:["/Users/changzhifeng/liyu/03-JS/images/z1.jpg"],
			playtime:3000
		});
		new Coursel({
			id:"box2",
			width:600,
			height:200,
			img:["/Users/changzhifeng/liyu/03-JS/images/z2.jpg"],
			playtime:1000
		});
		*/
	</script>
</html>
